<script lang="ts" setup>
import { ref, onMounted } from "vue";

import { Message } from "@arco-design/web-vue";

import { useOpenLayers } from "@/hooks/useOpenLayers";

import fractureJson from "@/assets/GeoJSON/断裂带/断裂带.json";

const fractureData = fractureJson.断裂带数据.map((e) => JSON.parse(e));

const {
  initMap,
  addTiandiLayer,
  addMakers,
  removeLayer,
  setViewByObj,
  addFracture,
} = useOpenLayers("ol-map", handleClick);

function handleClick(features: any[]) {
  if (!features.length) return;

  // 进行点击事件处理的
  const makerTypes = ["台站"];

  const current = features[0]; //选取点击位置最上层的覆盖物，即features第一个

  // console.log(current);
  const { type, name, data } = current.values_;
  if (!makerTypes.includes(type)) return;
  Message.info(`你点击了${name}`);
  console.log(data);
  // const { lon, lat } = data;

  // 视角切换到当前站点位置
  setViewByObj(data);
}

onMounted(() => {
  initMap({
    view: {
      projection: "EPSG:4326",
      center: [120.209761, 30.211145], //自己设置中心点，也可以不设置
      zoom: 10,
      maxZoom: 18,
      minZoom: 8,
      // extent: [-180, -90, 180, 90],
    },
  });
  addTiandiLayer("ac2c7cd26555065aea9fd7376348b588");
  addFracture(fractureData);
  const makerList = [
    {
      name: "站点1",
      lon: "120",
      lat: "30",
    },
    {
      name: "站点2",
      lon: "120.5",
      lat: "30.5",
    },
  ];
  addMakers(makerList, "台站");
  // removeLayer("台站");
});

const imgUrl = (name: string) =>
  new URL(`/src/assets/icons/${name}`, import.meta.url).href;
// console.log(imgUrl("date.svg"));
</script>

<template>
  <div id="ol-map"></div>
</template>

<style lang="less" scoped>
#ol-map {
  width: 100%;
  height: 100%;
}
</style>
